<div class="cluster-details">
    <div class="row">
        <div class="col-md-12">
            <eshq-cluster-navigation summary="clusterDetailsCtrl.summary"></eshq-cluster-navigation>
        </div>
        <div ng-if="!!clusterDetailsCtrl.fetchingIndices" class="col-md-12">
            <div class="summary-loader">
                <div>
                    Loading Indices <i class="fa fa-spinner fa-pulse fa-2x fa-fw"></i>
                    <span class="sr-only">Loading...</span>
                </div>
            </div>
        </div>
    </div>


    <eshq-cluster-summary ng-if="clusterDetailsCtrl.summary"
                          summary="clusterDetailsCtrl.summary"></eshq-cluster-summary>

    <div class="row">
        <div class="col-md-6 node-details">
            <h3>Nodes</h3>
            <table id="node-table" ts-wrapper class="table table-striped table-hover" 
                    ts-per-page-options="clusterDetailsCtrl.perPageOptions"
                    ts-per-page-default="clusterDetailsCtrl.perPageDefault"
                    ng-if="clusterDetailsCtrl.nodes.length"
                    ts-current-page="clusterDetailsCtrl.currentPage">
                <thead>
                <tr>
                    <th ts-criteria="name" 
                        ng-attr-ts-default="{{clusterDetailsCtrl.currentSort.name === 'name' ? clusterDetailsCtrl.currentSort.order : undefined}}">
                        Name
                    </th>
                    <th ts-criteria="is_master_node"
                        ng-attr-ts-default="{{clusterDetailsCtrl.currentSort.name === 'is_master_node' ? clusterDetailsCtrl.currentSort.order : undefined}}">
                        Master
                    </th>
                    <th ts-criteria="is_data_node"
                        ng-attr-ts-default="{{clusterDetailsCtrl.currentSort.name === 'is_data_node' ? clusterDetailsCtrl.currentSort.order : undefined}}">
                        Data
                    </th>
                    <th ts-criteria="host"
                        ng-attr-ts-default="{{clusterDetailsCtrl.currentSort.name === 'host' ? clusterDetailsCtrl.currentSort.order : undefined}}">
                        HTTP Addr
                    </th>
                    <th ts-criteria="heapPercent"
                        ng-attr-ts-default="{{clusterDetailsCtrl.currentSort.name === 'heapPercent' ? clusterDetailsCtrl.currentSort.order : undefined}}">
                        Heap Used
                    </th>
                    <th ts-criteria="fsFree"
                        ng-attr-ts-default="{{clusterDetailsCtrl.currentSort.name === 'fsFree' ? clusterDetailsCtrl.currentSort.order : undefined}}">
                        Free Space
                    </th>
                    <th ts-criteria="load"
                        ng-attr-ts-default="{{clusterDetailsCtrl.currentSort.name === 'load' ? clusterDetailsCtrl.currentSort.order : undefined}}">
                        Load
                    </th>
                </tr>
                </thead>
                <tbody>
                <tr ng-repeat="node in clusterDetailsCtrl.nodes" ts-repeat ts-hide-no-data >
                    <td>
                        <a ui-sref="clusterNodeDetails({clusterName: clusterDetailsCtrl.clusterName, nodeId: node.node_id})" uib-tooltip="Uptime: {{ node['uptime'] }}">{{node['name']}}</a>
                    </td>
                    <td><i class="fa" ng-class="{{node.is_master_node}} ? 'fa-check-square' : ''"
                           tooltip-placement="bottom"
                           uib-tooltip="Current Master Node"></i><i class="fa"
                                                                    ng-class="{{node.is_electable_master}} ? 'fa-minus' : ''"
                                                                    tooltip-placement="bottom"
                                                                    uib-tooltip="Electable Master Node"></i></td>
                    <td><i class="fa" ng-class="{{node.is_data_node}} ? 'fa-check-square' : ''"></i></td>

                    <td>{{node.host}}</td>
                    <td><span uib-tooltip="{{ node.heapCurrent }} / {{ node.heapMax }}">{{node.heapPercent}}%</span>
                    </td>
                    <td>{{node.fsFree}}</td>
                    <td>{{node.load}}</td>
                </tr>
                </tbody>
            </table>
        </div>
        <div class="col-md-6">
            <h3>Indices</h3>
            <eshq-indices-table ng-if="clusterDetailsCtrl.indices.length"
                                indices="clusterDetailsCtrl.indices"></eshq-indices-table>
        </div>
    </div>


</div>